<template>
  <div class="layout-container">
    <header class="header"></header>
    <main class="main">
      <!-- 让路由显示在中间 -->
      <router-view />
    </main>
    <footer class="footer">
      <FooterBar :links="links"></FooterBar>
    </footer>
  </div>
</template>

<script>
/**
 * layout 是布局路由，在他的下面，显示了 home / classify / about / personCenter
 */
import FooterBar from '@/components/FooterBar.vue'
export default {
  components: { FooterBar },
  data() {
    return {
      links: [
        {
          path: '/layout/home',
          text: '首页',
          icon: 'icon-home',
          selectedIcon: 'icon-homefill',
        },
        {
          path: '/layout/classify',
          text: '分类',
          icon: 'icon-fenlei',
          selectedIcon: 'icon-fenlei1',
        },
        {
          path: '/layout/cart',
          text: '购物车',
          icon: 'icon-31gouwuche',
          selectedIcon: 'icon-gouwucheman',
        },
        {
          path: '/layout/personCenter',
          text: '个人中心',
          icon: 'icon-gerenzhongxin1',
          selectedIcon: 'icon-gerenzhongxin',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
// scoped 会有作用域，只让css代码在这个文件生效
.layout-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 50px;
  background: red;
}
.main {
  flex: 1;
  overflow: auto;
}
.footer {
  height: 50px;
  background: #eee;
}
</style>
